<template>
	<div style="background-color: white;overflow: hidden;min-height: 100vh;">
		<h2 class="title">我的讨论贴</h2>
		<div v-if="MypostsList.length!==0">
		<div class="card" v-for="Item in MypostsList" :key="Item.id">
			<div style="display: flex;justify-content: space-between;">
				<h2 class="title" v-if="Item.examineStatus==0" style="color:gold;">未审核</h2>
				<h2 class="title" v-if="Item.examineStatus==1" style="color:#00DBCF;">审核通过</h2>
				<h2 class="title" v-if="Item.examineStatus==2" style="color:red;">审核未通过</h2>
				<span class="time">{{Item.createTime}}</span>
			</div>
			<div class="content">
				<!-- 	<div class="cover">
					<div class="cover-inner">
						<img src="https://oceappimg.oss-cn-shenzhen.aliyuncs.com/test/content/article//image/2021-10-30QQ图片20210809164125.jpg" />
					</div>
				</div> -->
				<div class="inner">
					<!-- <div v-html="Item.content" style="margin: 1.625rem;" /> -->
					<div class="rich-text">
						<p>{{Item.title}}</p>
					</div>
					<span style="cursor: pointer;color: #00DBCF;" @click="check(Item.id)">阅读全文</span>
				</div>
			</div>
			<div class="actions">
				<div style="display: flex;">
					<div style="margin-right: 1.25rem;">
						<i class="el-icon-view"></i>
						浏览 {{Item.views}}
					</div>
					<div style="margin-right: 1.25rem;">
						<i class="el-icon-thumb"></i>点赞 {{Item.praiseCount}}
					</div>
					<div style="margin-right: 1.25rem;">
						<i class="el-icon-star-off"></i>收藏 {{Item.collectionCount}}
					</div>
					<div style="margin-right: 1.25rem;">
						<i class="el-icon-chat-line-round"></i>评价{{Item.replyCount}}
					</div>
				</div>
				<div style="display: flex;cursor: pointer;">
					<div style="margin-left: 1.25rem;">
						编辑
					</div>
					<div style="margin-left: 1.25rem;" @click="DeletePost(Item.id)">
						删除
					</div>
				</div>
			</div>
			<el-divider></el-divider>
		</div>
	    </div>
		<div v-if="MypostsList.length==0">
			<el-empty description="暂无数据"></el-empty>
	    </div>
	</div>
</template>

<script>
	import {
		PersonManager
	} from "../../../request/personCenter.js"
	export default {
		data() {
			return {
				MypostsList: []
			}

		},
		created() {
			this.Personposts();
		},
		methods: {
			//获取用户本人发布的博客
			Personposts() {
				const loading = this.$loading({
				  lock: true,
				  text: "正在加载...",
				  spinner: "el-icon-loading",
				  background: "rgba(0, 0, 0, 0.7)",
				});
				PersonManager.Personposts(1, 10).then(e => {
					console.log(e);
					loading.close();
					this.MypostsList = e.data.data;
				})
			},
			//跳转页面
			check(id) {
				// alert(id);
				this.$router.push({
					path: `/SurfaceDetails`,
					query: {
						id: id
					}
				});
			},
			DeletePost(id) {
				var _that = this
				this.$confirm('此操作视为删除帖子,是否继续', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						this.axios
							.delete(
								'/posts/' + id, {
									headers: {
										token: localStorage.getItem("token"),
										'content-type': 'application/json'
									}
								}
							)
							.then(() => {
								this.$message({
									type: 'success',
									message: '已删除标签'
								})
								this.Personposts();
							})
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '再考虑一下'
						})
					})
			}

		}
	}
</script>

<style scoped="scoped">
	.title {
		margin: 20px 20px 10px;
		font-size: 1.25rem;

	}

	.card {
		margin-bottom: 1.25rem;
	}

	.card:first-child {
		padding-top: 0;
	}

	.card .title {
		font-size: 15px;
		font-weight: 500;
		line-height: 1.9;
		color: #000000;
		cursor: pointer;

	}

	.time {
		color: #999;
		margin-right: 1.25rem;
	}

	.content {
		cursor: pointer;
		-webkit-transition: color .14s ease-out;
		transition: color .14s ease-out;
		line-height: 1.97;
		display: flex;

		margin: 1.25rem;

	}

	.cover {
		position: relative;
		width: 190px;
		height: 105px;
		margin-top: -2px;
		margin-right: 18px;
		margin-bottom: 4px;
		float: left;
		overflow: hidden;
		background-position: 50%;
		background-size: cover;
		border-radius: 4px;
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
	}

	.cover-inner {
		position: absolute;
		top: 50%;
		left: 0;
		height: 100%;
		width: 100%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
		overflow: hidden;
	}

	.inner {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}

	.rich-text {
		pointer-events: none;
		line-height: 1.9;
		height: 1.9;
		cursor: pointer;
		display: -webkit-box;
		white-space: normal;
		word-break: break-word;
		-webkit-line-clamp: 4;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.more {
		display: inline-block;
		font-size: 14px;
		text-align: center;
		cursor: pointer;
		margin-left: 4px;
		color: #175199;
		height: auto;
		padding: 0;
		line-height: inherit;
		background-color: rgba(0, 0, 0, 0);
		border: none;
		border-radius: 0;
		float: right;
		margin-top: -26px;
		position: relative;
		background: #fff;
	}

	.el-button--text {
		border-color: rgba(0, 0, 0, 0);
		color: #415fff;
		background: rgba(0, 0, 0, 0);
		padding-left: 0;
		padding-right: 0;
	}

	.el-button {
		display: inline-block;
		line-height: 1;
		white-space: nowrap;
		cursor: pointer;
		background: #fff;
		border: 1px solid #dcdfe6;
		border-color: #dcdfe6;
		color: #606266;
		-webkit-appearance: none;
		text-align: center;
		box-sizing: border-box;
		outline: none;
		margin: 0;
		-webkit-transition: .1s;
		transition: .1s;
		font-weight: 500;
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
		padding: 12px 20px;
		font-size: 14px;
		border-radius: 4px;
	}

	.actions {
		padding: 10px 20px;
		margin: 0.3125rem;
		color: #646464;
		background: #fff;
		display: flex;
		justify-content: space-between;
	}
</style>
